<template>
 <view class="main">
  <view class="part ap23">
	  <view class="part1">
		 <view class="part1-1">
			<view class="pp1">
			  <view class="pp1-1">当前订单</view>
			  <view class="pp1-2">订单号：{{oinfo.ordersn}}</view>
			</view>
			<view class="pp2">
			  <view class="pp2-1">
				<image :src="oinfo.uavatar" class="pimg1"></image> 
				<image src="https://ppp.new.zeroitem.cn/ppp/corder/15.png" class="pimg2"></image>
			  </view>
			  <view class="pp2-2" v-if="zt==1">【未开始】</view> 
			  <view class="pp2-2" v-if="zt==2">【进行中】</view> 
			  <view class="pp2-2" v-if="zt==3">【已提交作品】</view>
			  <view class="pp2-2" v-if="zt==4">【拍摄结束】</view>
			  <view class="pp2-2" v-if="zt==5">【已完成】</view>
			  <view class="pp2-3">
				<image src="https://ppp.new.zeroitem.cn/ppp/corder/9.png" class="pimg3" v-if="oinfo.persion_upload_video==1 && zt<=1"></image>
			  </view>
			</view>	
			
				
		 </view> 

		 <view class="part2c" style="margin-top:50rpx">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/7.png" class="pimg4"></image>
			   时间
			</view>
			<view class="pt2-2">{{oinfo.pdate1}}     {{oinfo.sj}}</view>  
		 </view>
		 <view class="line"></view>
		 
		 <view class="part2c">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/6.png" class="pimg4"></image>
			   地点
			</view>
			<view class="pt2-2">{{oinfo.jtdz}}</view>  
		 </view>
		 <view class="line"></view>		 

		 <view class="part2c">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/4.png" class="pimg4"></image>
			   联系电话
			</view>
			<view class="pt2-2">{{oinfo.phone}}</view>  
		 </view>
		 <view class="line"></view>
				  
		 <view class="part2c">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/5.png" class="pimg4"></image>
			   拍摄要求
			</view>
			<view class="pt2-2">
			  {{oinfo.remark1}}
			  <text class="ckbtn" @click="ckbtn" v-if="oinfo.slice_type>0 || oinfo.remark!=''">查看详情</text>  
			</view>  
		 </view>
		 <view class="line"></view>				  

		 <view class="part2c">
			<view class="pt2-1">
			  <image src="https://ppp.new.zeroitem.cn/ppp/corder/6.png" class="pimg4"></image>
			   费用
			</view>
			<view class="pt2-2">{{oinfo.total_price}}￥</view>  
		 </view>
		

		
		<view class="part2 ap2">
	        <view class="part2-h">
			  <view class="part2-h-1">总时长</view>  
			  <view class="part2-h-2">
				<image src="https://ppp.new.zeroitem.cn/ppp/corder/2.png" class="pimg12"></image>  
			  </view> 
		   </view>
	        <view class="part2-h1">
			  <view class="part2-h1-1">{{oinfo.min}}</view>  
			  <view class="part2-h1-2">min</view>
			  <view class="part2-h1-3" v-if="zt>1">起始时间  {{oinfo.pstime1}}</view>
		    </view>
           <view class="part2-h2">剩余时长</view>
		   <view class="part2-h3">
		     <view class="part2-h3-1">{{oinfo.spmin}}</view>  
		     <view class="part2-h3-2">min</view>
			 <image src="https://ppp.new.zeroitem.cn/ppp/corder/10.png" class="pimg13" @click="zjsc()" v-if="oinfo.persion_upload_video==1 && zt<=3"></image>  
		   </view>
		</view> 
				 				 
		<view class="partvideo ap3">
		   <video :src="video_src" style="width:444rpx;height:250rpx;" objectFit="cover" class="pimg17" :poster="video_pic" v-if="video_src!=''"></video>
		   <image :src="video_pic" style="width:444rpx;height:250rpx;" class="pimg17" v-if="video_src==''"></image>
		   <view class="part2-r">
			   <view class="pm1" :class="[{'pm_cur':video_v == 1}]" @click="version(1)">◁ 版本1</view>
			   <view class="pm1" :class="[{'pm_cur':video_v == 2}]" @click="version(2)">◁ 版本2</view>
			   <view class="pm1" :class="[{'pm_cur':video_v == 3}]" @click="version(3)">◁ 版本3</view>
		   </view>
		</view> 
		 <button open-type="share" class="fxbtn" v-if="video_src!=''">查看分享视频</button>						  
	  </view>     
   </view>

 <view class="part3" v-if="zt>=2 && zt<=3 && oinfo.persion_upload_video==1">
     <view class="p3-20" @click="psjs()">
	   <image src="https://ppp.new.zeroitem.cn/ppp/ps/ps2.png" class="pimg22"></image>
	   <view class="ptxt20">拍摄结束</view>
	</view>
	<view class="p3-21" @click="jumpzp(oid)">
	  <image src="https://ppp.new.zeroitem.cn/ppp/ps/ps1.png" class="pimg21"></image>	
	</view>
 </view> 
  <view class="part3 addp3" v-if="zt==4">拍摄已经结束，等待客户确认</view> 
  <view class="part3 addp3" v-if="zt==5">当前订单已经完成</view>
  <view class="part3 addp3" v-if="zt==1">等待客户确认开始拍摄</view>
   <view class="mask" v-if="tc1==1">
      <view class="qtc">
		<view class="tctxt-1 txt1">
			需要现上传相应的作品，并且给客户评论后才能完成拍摄。
		</view> 
		<view class="tctxt-2 txt2">是否确认完成拍摄</view> 
		<view class="tcbtn1 btnm">
		  <view class="tcbtn btn1" @click="qrwc1()">否</view>
		  <view class="tcbtn btn2" @click="qrwc2()">是</view>
		</view>
	  </view>
   </view>		  
	
 <view class="mask" v-if="tc6==1">
	 <view class="bztc1">
		 <view class="bzpp1">拍摄备注</view>
		 <view class="line2" style="margin-top:10rpx"></view>
		 <textarea placeholder="请输入备注内容" class="barea" v-model="remark"></textarea>
		  <block v-if="vname!=''">
	      <view class="bzpp1">参考视频</view>
		  <view class="line2" style="margin-top:10rpx"></view>
	       <video :src="cvideo_src"  objectFit="cover" class="pimg17" style="margin-left:10rpx;" ></video>
		   </block>
		   <block v-if="plink!=''">
	       <view class="bzpp1">参考链接</view>
		   <view class="line2" style="margin-top:10rpx"></view>
		   <textarea class="barea" v-model="plink" style="height:100rpx" @click="copylink"></textarea>
		    </block>
			<view class="line2"></view>
			<view class="tjbtn" @click="closetc6">确定</view>
	 </view>
 </view>	  
	  
	 
 </view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		toLogin
	} from '@/utils/login'
	import {
	   getOrderDetail,psjs
	} from '@/api/ppp'	
	import {
		loadingFun,
		menuJump
	} from '@/utils/tools'	
	
	import {
		loadingType
	} from '@/utils/type'
	export default {
	    data() {
	        return {
             zt:0,
			 oid:0,
			 tc1:0,
			 oinfo:[],
			 video_v:1,
			 video_src:"",
			 video_pic:"",
			 cvideo_src:"",
			 slice_type:1,
			 vname:"",
			 wfile:"",
			 plink:"",
			 remark:"",
			 tt:null,
			 tc6:0
	        }
	    },
		onShow(){
	
		},
		
		onShareAppMessage(res) {
		  var oid=this.oid;
		  var pic=this.video_pic;
           return {
         　　　 　title:'片拍拍精选视频展示',
                  path: "/pages/ppp/ps/zpshare?type=2&id="+oid,
                 imageUrl: pic
         　　}
		
		},			

		onLoad(options){
		 var oid=options.oid;
		 this.oid=oid;
		 this.getOrderDetail(oid);
		},
	    methods: {
		closetc6(){this.tc6=0;},
		ckbtn(){this.tc6=1;},
		zjsc(){
		 if(this.zt==5){uni.showToast({title:'订单已经完成，无法进行追加时长',icon:"none"});}
		 if(this.zt<5){uni.showToast({title:'请联系客户进行追加时长',icon:"none"});}
		},
		daojishi(){
		  var ss=parseInt(this.oinfo.spmin); 
		  var tt=this.tt;
		  var s1=ss-1;
		  var self=this;
		  if(s1<=0){
					this.oinfo.spmin=0;
		   clearTimeout(tt);
		  }else{
					 this.oinfo.spmin=s1;
		    tt=setTimeout(function(){
						self.daojishi(); 
					 },60000);
		   }
		},
		psjs(){this.tc1=1;},
	    qrwc1(){this.tc1=0;},
		async qrwc2(){
		  if(this.oinfo['persion_upload_video']!=1){
		    uni.showToast({title:'无权限操作',icon:"none"});
		    return false;
		  }
		  if(this.zt!=3){
		    uni.showToast({title:'请先提交作品并给客户评价',icon:"none"});
			return false;
		  }
		  const{
		  code,
		  msg,
		  data
		  }= await psjs(this.oid);
		  if(data.suc==1){
	       this.tc1=0;
		   this.zt=4;
		   uni.showToast({title:'操作更改',icon:"none"});
		  }else{
			uni.showToast({title:data.msg,icon:"none"});  
		  }
		},
        version(type){
		this.video_v=type;
		var version=this.oinfo['version'];
		if(type==1){
		 this.video_src=version[0]['video_src'];
		 this.video_pic=version[0]['video_pic'];	
		}
		if(type==2){
		 this.video_src=version[1]['video_src'];
		 this.video_pic=version[1]['video_pic'];
		}
		if(type==3){
		 this.video_src=version[2]['video_src'];
		 this.video_pic=version[2]['video_pic'];
		}
	  },
	  copylink(){
	    uni.setClipboardData({data:this.plink})
	    			uni.showModal({
	    				title: '提示',
	    				content: '您已经复制了当前的参考链接，您可以把参考链接粘帖到浏览器或者粘帖到微信聊天里面进行查看',
	    				confirmText: "确认", // 确认按钮的文字  
	    				showCancel: true, // 是否显示取消按钮，默认为 true
	    				confirmColor: '#f55850',
	    				cancelColor: '#39B54A',
	    				success: (res) => {
	    				} 
	    			})	
	  },
		 async getOrderDetail(oid){
		 	  const{
		 	  code,
		 	  msg,
		 	  data
		 	  }= await getOrderDetail(oid);
		 	  this.oinfo=data; 
		 	  var zt=parseInt(data.step)-1;
		 	  this.zt=zt;
			  var version=data['version'];
			  this.video_src=version[0]['video_src'];
			  this.video_pic=version[0]['video_pic'];
			  this.remark=data.remark;
			  this.slice_type=data.slice_type;
			  this.plink=data.plink;
			  if(data.sinfo!='' && data.sinfo!=undefined){
			  	this.vname=data.sinfo;
			  	this.wfile="文件:"+data.sinfo;  
			  	this.cvideo_src='https://ppp-1300934138.cos.ap-shanghai.myqcloud.com/wxFile/'+data.sinfo;
			  }
			  if(this.zt>=2){
			   this.daojishi();
			  }
		  },
		  jumpzp(oid){
			uni.navigateTo({
			  url:"/pages/ppp/ps/tjzp?oid="+oid
			})  
		  }
	    }
	}
</script>

<style>
@import "./order1.css";	
</style>
